<template>
  <div>
    <el-row>
      <el-col :span="6">
        <span>【题型】：{{ questionType }}</span>
      </el-col>
      <el-col :span="6">
        <span>【编号】：{{ dialogs.id }}</span>
      </el-col>
      <el-col :span="6">
        <span>【难度】：{{ difficulty }}</span>
      </el-col>
      <el-col :span="6">
        <span>【标签】：{{ dialogs.tags }}</span>
      </el-col>
    </el-row>
    <el-row style="margin-top: 20px">
      <el-col :span="6">
        <span>【学科】：{{ dialogs.subjectName }}</span>
      </el-col>
      <el-col :span="6">
        <span>【目录】：{{ dialogs.directoryName }}</span>
      </el-col>
      <el-col :span="6">
        <span>【方向】：{{ dialogs.direction }}</span>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row>
      <el-col :span="6">
        <span>【题干】：</span>
        <p style="color: blue; width: 700px" v-html="dialogs.question"></p>
        <div v-if="dialogs.questionType === '1'">
          <p>单选题 选项：（以下选中的选项为正确答案）</p>
          <div v-for="item in dialogs.options" :key="item.id">
            <el-radio :label="1" :value="item.isRight">
              {{ item.title }}
            </el-radio>
          </div>
        </div>

        <div v-else-if="dialogs.questionType === '2'">
          <p>多选题 选项：（以下选中的选项为正确答案）</p>
          <div v-for="item in dialogs.options" :key="item.id">
            <el-checkbox :checked="item.isRight === 1 ? true : false">
              {{ item.title }}
            </el-checkbox>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-divider></el-divider>
    <span
      >【参考答案】：<el-button type="danger" @click="isshow = true">
        视频答案解析
      </el-button>
      <div v-if="isshow">
        <video
          style="width: 500px"
          controls
          loop
          :src="dialogs.videoURL"
        ></video>
      </div>
    </span>

    <el-divider></el-divider>

    <div style="display: flex">
      <div style="width: 110px; line-height: 42px">【答案解析】：</div>
      <!-- {{dialogs.answer}} -->
      <div style="width: 700px" v-html="dialogs.answer"></div>
    </div>

    <el-divider></el-divider>

    <span>【题目备注】： </span>
    <span style="width: 700px" v-html="dialogs.remarks"></span>
  </div>
</template>

<script>
import { difficulty, questionType } from '@/api/hmmm/constants'
export default {
  data () {
    return {
      isshow: false
    }
  },
  computed: {
    difficulty () {
      const value = difficulty.find((v) => v.value === +this.dialogs.difficulty)
      //   console.log(value)
      return value.label
    },
    questionType () {
      const value = questionType.find(
        (v) => v.value === +this.dialogs.questionType
      )
      //   console.log(value)
      return value.label
    }
  },
  props: {
    dialogs: {
      type: Object,
      required: true
    }
  }
}
</script>

<style scoped lang="scss"></style>
